<template>

  <!-- 文章卡片组件 -->
  <el-card class="me-area" :body-style="{ padding: '16px' }">
    <div class="me-article-header">
      <!-- 文章标题 -->
      <a @click="view(id)" class="me-article-title">{{title}}</a>
      <!-- 置顶按钮，v-if判断用户是否是管理员 如果是管理员则显示 不是则隐藏-->
      <el-button @click="pushTop(id)" v-if="admin > 0" class="me-article-icon" type="text">置顶</el-button>
      <!-- 判断这个文章用户是否能删除，能删除的只有作者和管理员，通过v-if判断是否显示 -->
      <el-button @click="deleteArticle(id)" v-if="canDelete > 0" class="me-article-icon-del" type="text">删除</el-button>
      <span class="me-pull-right me-article-count">
      <!-- 显示浏览量 -->
	    	<i class="el-icon-view"></i>&nbsp;{{viewCounts}}
	    </span>
    </div>
    <!-- 文章简介 -->
    <div class="me-artile-description">
      {{summary}}
    </div>

    <div class="me-article-footer">
      <!-- 作者的头像 -->
      <img class="me-article-author-header" :src="avatar"/>
      <!-- 作者名称 -->
	  	<span class="me-article-author">
	    	{{author}}
	    </span>
      <!-- 收藏按钮，判断是否收藏，如果没有收藏则显示收藏按钮，如果收藏则隐藏收藏按钮 -->
      <i v-if="isFavorite === 0" class="el-icon-star-off" title="收藏" @click="favoriteArticle(id, 1)"></i>
      <!-- 取消收藏，判断是否收藏，如果收藏则显示取消收藏按钮，如果没有收藏则隐藏收藏按钮 -->
      <i v-else class="el-icon-star-on" style="color: #e87a38;" title="取消收藏" @click="favoriteArticle(id, 0)"></i>
      <!--分享-->
      <el-popover
        placement="right-start"
        width="260"
        trigger="click"
        v-model="isShowFriend"
        >
        <!-- 弹窗 选择要分享的好友 -->
        <el-table :data="friendList">
          <el-table-column width="260"  property="friendUserName" label="好友">
            <template slot-scope="scope" >
              <div class="me-share-content">
                <img class="me-share-header" :src="scope.row.friendAvatar"/>
                <span class="me-article-author">
                	{{scope.row.friendUserName}}
                </span>
                <button class="me-pull-right" @click="shareMyFriend(scope.row.friendUserId, id)">分享</button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-button slot="reference" @click="showFriends()" class="me-share-svg">
          <svg t="1647347326908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4724" width="21" height="21"><path d="M696 376c52.8 0 96-43.2 96-96s-43.2-96-96-96-96 43.2-96 96 43.2 96 96 96z m0-144c27.2 0 48 20.8 48 48s-20.8 48-48 48-48-20.8-48-48 20.8-48 48-48zM696 648c-30.4 0-57.6 14.4-75.2 36.8l-208-128c-11.2-6.4-25.6-3.2-33.6 8-6.4 11.2-3.2 25.6 8 33.6l208 128c1.6 1.6 4.8 1.6 6.4 3.2-1.6 4.8-1.6 11.2-1.6 17.6 0 52.8 43.2 96 96 96s96-43.2 96-96-43.2-99.2-96-99.2z m0 144c-27.2 0-48-20.8-48-48s20.8-48 48-48 48 20.8 48 48-20.8 48-48 48zM380.8 500.8l208-128c11.2-6.4 14.4-22.4 8-33.6-6.4-11.2-22.4-14.4-33.6-8l-204.8 126.4C340.8 432 312 416 280 416c-52.8 0-96 43.2-96 96s43.2 96 96 96 96-43.2 96-96v-9.6c1.6 0 3.2-1.6 4.8-1.6zM280 560c-27.2 0-48-20.8-48-48s20.8-48 48-48 48 20.8 48 48-20.8 48-48 48z" p-id="4725" fill="#707070"></path></svg>
        </el-button>
      </el-popover>
      <!-- 显示该文章的标签， -->
      <el-tag v-for="t in tags" :key="t.tagName" size="mini" type="warning" style="font-weight: bold">{{t.tagName}}</el-tag>
      <span class="me-pull-right me-article-count">
	    	<i class="el-icon-time"></i>&nbsp;{{createDate | format}}
	    </span>
    </div>

  </el-card>
</template>

<script>
import {articleTop, deleteArticle, favoriteArticle, shareArticle} from '@/api/article'
import {getToken} from '@/request/token'
import {listFriend} from '@/api/friend'

  export default {
    name: 'ArticleItem',
    props: {
      id: String,
      weight: Number,
      title: String,
      commentCounts: Number,
      viewCounts: Number,
      summary: String,
      author: String,
      avatar:String,
      tags: Array,
      createDate: String,
      canDelete: Number,
      admin: Number,
      favorite: Number
    },
    data() {
      return {
        friendList: [],
        isFavorite:this.favorite,
        isShowFriend:false
      }
    },
    computed: {
      user() {
        let login = this.$store.state.account.length !== 0
        return {
          login
        }
      }
    },
    methods: {
      // 查看文章，调用查看文章接口
      view(id) {
        this.$router.push({path: `/view/${id}`})
      },
      // 展示好友列表
      showFriends() {
        // 判断用户是否登录，如果没有登录则直接结束
        if(!this.user.login){
          return;
        }
        let that = this;
        let params = {page:1, pageSize:200}
        // 调用获取好友列表的接口
        listFriend(params).then(res => {
          that.friendList = res.data
        }).catch(error => {
          if (error !== 'error') {
            // 获取错误信息，统一显示好友列表加载失败
            that.$message({type: 'error', message: '好友列表加载失败', showClose: true})
          }
        })
      },
      // 分享文章给好友
      shareMyFriend(friendUserId, articleId) {
        let that = this
        // 调用element-ui提供的loading加载组件
        let loading = this.$loading({
          lock: true,
          text: '分享中，请稍后...'
        })
        let params = {"friendUserId":friendUserId, "articleId":articleId}
        // 调用分享接口
        shareArticle(params).then(() => {
          // 关闭loading组件
          loading.close();
          // 分享成功弹出分享成功
          that.$message({message: '分享成功啦', type: 'success', showClose: true})
          that.isShowFriend=false;
        }).catch(error => {
          if (error !== 'error') {
            // 分享失败弹出分享失败
            that.$message({type: 'error', message: '分享失败', showClose: true})
          }
        })
      },
      //置顶
      pushTop(id){
        // 判断是否登录,登录则执行置顶
        if (getToken()) {
          let that = this
          let loading = this.$loading({
            lock: true,
            text: '置顶中，请稍后...'
          })
          // 调用置顶接口
          articleTop(id).then((data) => {
            if(data.success){
              loading.close();
              that.$message({message: '置顶成功啦', type: 'success', showClose: true})
              this.$router.go(0)
            }else{
              that.$message({message: error, type: '置顶失败:'+data.msg, showClose: true});
            }

          }).catch((error) => {
            loading.close();
            if (error !== 'error') {
              that.$message({message: error, type: 'error', showClose: true});
            }
          })
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请先登录哦'
          })
        }
      },
      // 删除文章
      deleteArticle(id){
        if (getToken()) {
          let that = this
          let loading = this.$loading({
            lock: true,
            text: '删除中，请稍后...'
          })
          // 调用删除文章接口
          deleteArticle(id).then((data) => {
            if(data.success){
              loading.close();
              that.$message({message: '删除成功啦', type: 'success', showClose: true})
              this.$router.go(0)
            }else{
              that.$message({message: error, type: '删除失败:'+data.msg, showClose: true});
            }

          }).catch((error) => {
            loading.close();
            if (error !== 'error') {
              that.$message({message: error, type: 'error', showClose: true});
            }
          })
        } else {
          // 没有登录弹窗请先登录
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请先登录哦'
          })
        }
      },
      // 收藏文章
      favoriteArticle(id, status){
        if(!this.user.login){
          this.noLoginTips()
          return;
        }

        let that = this
        let successTips = status == 0 ? '取消收藏成功啦' : '收藏成功啦';
        let failTips = status == 0 ? '取消收藏失败啦'  : '收藏失败啦';
        let loading = this.$loading({
          lock: true,
          text: '正在处理，请稍后...'
        })
        // 调用收藏文章接口
        favoriteArticle(id, status).then((data) => {
          if(data.success){
            loading.close();
            that.$message({message: successTips, type: 'success', showClose: true})
            that.isFavorite = status;
          }else{
            console.info(data.msg)
            that.$message({message: failTips, type: 'fail', showClose: true});
          }
        }).catch((error) => {
          loading.close();
          if (error !== 'error') {
            that.$message({message: error, type: 'error', showClose: true});
          }
        })
      },
      // 没有登录提示
      noLoginTips(){
        this.$message({
          type: 'warning',
          showClose: true,
          message: '请先登录哦'
        })
      }
    }
  }
</script>

<style scoped>

  .me-article-header {
    padding-bottom: 10px;
  }

  .me-article-title {
    font-weight: 600;
  }

  .me-article-icon {
    padding: 3px 8px;
  }

  .me-article-icon-del {
    padding: 3px 8px;
    color: #a6a6a6;
  }

  .me-article-count {
    color: #a6a6a6;
    padding-left: 14px;
    font-size: 13px;
  }

  .me-pull-right {
    float: right;
  }

  .me-artile-description {
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 10px;
  }

  .me-article-footer *{
    vertical-align: middle;
  }

  .me-article-author-header {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #5fb878;
    margin-right: 2px;
  }

  .me-article-author {
    color: #a6a6a6;
    padding-right: 6px;
    font-size: 13px;
  }

  .me-share-content *{
    vertical-align: middle;
  }

  .me-share-content span{
    font-size: 16px;
  }

  .me-share-content button{
    height: 25px;
    border: 0px;
    font-size: 14px;
    width: 60px;
    border-radius: 35px;
    background-color: #f15668;
    color: #fff;
  }

  .me-share-svg {
    border: 0px;
    padding: 0px;
  }

  .me-share-header {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #5fb878;
    margin-right: 8px;
  }

  .el-tag {
    margin-left: 6px;
  }
</style>
